{% extends 'game/base.html' %}
{% block link %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/recommend.css')}}">
{% endblock %}
{% block style %}
    .rec-form{
        display: flex;
        flex-direction: row;
        align-content: flex-start;
    }
    .el-form{
        width:50%;
        display:flex;
        flex-direction: column;
    }
    .dis_input{
        width:7%;
    }
    .el-input.is-disabled{
        color:#fff;
    }
    *,
    body {
        padding: 0px;
        margin: 0px;
        font-family: "微软雅黑";
        color:#000000;
    }
    .input_btn{
        color:#FFF;
        background-color:limegreen;
    }
    .user_detail{
        display:flex;
        flex-direction: row;
        height:80%;
    }
    .part{
        width:50%;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
    }
{% endblock %}
{% block main %}
    <div class="rec-form">
        <el-input class="dis_input" value="用户id" :disabled="true" ></el-input>
        <el-input v-model="input_id" type="text" id="user_id"  placeholder="请输入id" @input="InputChange" style="width:20%"></el-input>
        <div style="width: 1%"></div>
        <el-input class="dis_input" value="账号名称"  :disabled="true" ></el-input>
        <el-input v-model="input_name" type="text" id="user_name" placeholder="请输入用户名" style="width:20%"></el-input>
        <button class="el-button input_btn"><i class="el-icon-search" onclick="get_user()"></i>展示</button>
    </div>
    <div style="height: 3%"></div>
    <div class="user_detail">
        <div class="part">
            <div style="width:90%;height: 50%;">
                {% if user %}
                    <el-descriptions title="用户信息" border >
                        <el-descriptions-item label="用户名">{{ user.name }}</el-descriptions-item>
                        <el-descriptions-item label="用户编号">{{ user.id }}</el-descriptions-item>
                        <el-descriptions-item label="手机号">123456</el-descriptions-item>
                        <el-descriptions-item label="充值总额">{{ user.total_pay }}元</el-descriptions-item>
                        <el-descriptions-item label="充值次数">{{ user.pay_times }}</el-descriptions-item>
                        <el-descriptions-item label="充值率">{{ user.pay_rate }}</el-descriptions-item>
                        <el-descriptions-item label="最近在玩">{{ user.last_game }}</el-descriptions-item>
                        <el-descriptions-item label="游戏时长">30h</el-descriptions-item>
                        <el-descriptions-item label="喜爱游戏类型">
                            {% for tag in user.like_game_tag %}
                                <el-tag size="small">{{tag}}</el-tag>
                            {% endfor %}
                        </el-descriptions-item>
                    </el-descriptions>
                {% endif %}
            </div>
            <div style="width:100%;margin-top: 20px;">
                <el-descriptions title="游戏推荐" ></el-descriptions>
                <el-table :data="recommend_data" style="width: 100%">
                    <el-table-column prop="game_name" label="游戏" width="100"></el-table-column>
                    <el-table-column prop="tag" label="游戏类型" width="150"></el-table-column>
                    <el-table-column prop="login_num" label="多少人玩过" width="70"></el-table-column>
                    <el-table-column prop="same_num" label="选择相同标签的多少人玩过" width="150"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="part">
            <div style="margin-top: 5px;height: 100%;">
                {% for user in same_user %}
                    <div style="margin-top: 5px;">
                    <el-descriptions title="相似用户" border >
                        <el-descriptions-item label="用户名">{{ user.name }}</el-descriptions-item>
                        <el-descriptions-item label="用户编号">{{ user.id }}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{ user.phone }}</el-descriptions-item>
                        <el-descriptions-item label="充值总额">{{ user.total_pay }}元</el-descriptions-item>
                        <el-descriptions-item label="充值次数">{{ user.pay_times }}</el-descriptions-item>
                        <el-descriptions-item label="充值率">{{ user.pay_rate }}</el-descriptions-item>
                        <el-descriptions-item label="最近在玩">{{ user.last_game }}</el-descriptions-item>
                        <el-descriptions-item label="游戏时长">{{ user.play_times }}</el-descriptions-item>
                        <el-descriptions-item label="喜爱游戏类型">
                            {% for tag in user.like_game_tag %}
                                <el-tag size="small">{{tag}}</el-tag>
                            {% endfor %}
                        </el-descriptions-item>
                        <el-descriptions-item label="玩过的相同游戏数">{{ user.same_game }}</el-descriptions-item>
                        <el-descriptions-item label="相似度">{{ user.same_degree }}</el-descriptions-item>

                    </el-descriptions>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}
{% block app %}
    app.$data.input_id = '{{ id }}';
    app.$data.input_name = '{{ login_name }}';
    data = [
        {% for game,recommend_num in recommend_game %}
            {'game_name':'{{ game.name }}',
            'tag': '{{ game.game_tag }}','login_num':'{{ game.user_nums|string }}',
            'same_num':'{{ recommend_num }}'},
        {% endfor %}
    ];
    app.$data.recommend_data = data;
{% endblock %}
{% block js %}
    <script>
        function get_user(){
            var user_id = document.getElementById('user_id').value;
            var user_name = document.getElementById('user_name').value;
            window.location.href = '/admin/user_center?user_id='+user_id+'&user_name='+user_name;
        }
    </script>
{% endblock %}